<template>
	<view class="pay-defeat">
		<!-- 支付失败提示 -->
		<view class="defeat">
			<view>
				<img class="s-img" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%94%AF%E4%BB%98%E5%A4%B1%E8%B4%A5/u1973.png" alt="">
			</view>
			<view class="s-text">
				<text>支付失败</text>
			</view>
		</view>
	
		<!-- 提示文字 -->
		<view class="prompt-text">
			<text>支付遇到问题，请重新尝试支付</text>
		</view>
		
		<!-- 按钮 -->
		<view class="buttons">
			<navigator class="check-order" delta="1" open-type="navigateBack">
				<text>继续支付</text>
			</navigator>
			<navigator class="back-home" url="navigate/navigate?title=navigate" hover-class="navigator-hover">
				<text>返回首页</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		name:"payNoSuccess",
		data() {
			return {
				
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="less" scoped>
	// 支付失败提示
	.defeat {
		width: 750rpx;
		height: 426rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.s-img {
			width: 124rpx;
			height: 124rpx;
		}
		.s-text {
			font-size: 42rpx;
			font-weight: bold;
		}
	}

	// 提示文字
	.prompt-text {
		color: #a1a1a1;
		font-size: 27rpx;
		width: 750rpx;
		text-align: center;
	}
	
	// 按钮
	.buttons {
		width: 750rpx;
		height: 256rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding-top: 20rpx;
		
		.check-order {
			width: 676rpx;
			height: 90rpx;
			background-color: #2f78ff;
			color: white;
			font-size: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
		.back-home {
			width: 676rpx;
			height: 90rpx;
			border: 1px solid #2f78ff;
			color: #2f78ff;
			font-size: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
	}
</style>